<template>
<div class="list" ref="wrapper">
  <div>
  <div class="area">
    <div class="title border-topbottom">
      当前城市
    </div>
    <div class="box">
      <ul>
        <li class="li">
          <div class="content">
            北极
          </div>
        </li>
      </ul>
    </div>

  </div>
  <div class="area">
    <div class="title border-topbottom">
    热门城市
    </div>

    <div class="box">
      <ul>
        <li class="li" v-for="item of hot" :key="item.id">
          <div class="content">
            {{item.name}}
          </div>
        </li>

      </ul>
    </div>
  </div>


    <div
      class="area"
      v-for="(item, key) of cities"
      :key="key"
      :ref="key"
    >
      <div class="title border-topbottom">{{key}}</div>
      <div class="item-list">
        <div
          class="item border-bottom"
          v-for="innerItem of item"
          :key="innerItem.id"
        >
          {{innerItem.name}}
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'List',
      props: {
        hot: Array,
        cities: Object,
        letter:String

      },
    mounted() {
      this.scroll  = new BScroll(this.$refs.wrapper)

    },
    watch:{
      letter(){
        if (this.letter){
          const element=this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
        }
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .list
    overflow hidden
    left: 0
    top: 1.86rem
    bottom: 0
    right: 0
    position: absolute

    @import '~styles/varibles.styl'
    .border-topbottom
    &:before
      border-color: #ccc
    &:after
      border-color: #ccc
    .border-bottom
    &:before
      border-color: #ccc

    .title
      height: .5rem
      background-color: #eee
      padding-left: .2rem
      line-height: .5rem
    .box
      padding: .1rem .3rem .1rem .1rem
      overflow hidden
      ul
        width: 100%
        .li
          width: 33.3%
          float: left
          .content
            text-align: center
            margin: .1rem
            border: .02rem solid #ccc
            padding: .1rem 0
    .item-list
      padding: 0
      .item
        line-height: .76rem
        color: #666
        padding-left:.2rem


</style>
